<script type="text/javascript" src="js/mouse_menu.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mouse_menu.css">
<p><b>Left click A</b></p>
<p><b>Middle click B</b></p>
<p><b>Right click C</b></p>
<a onmousedown="A()">A</a>
<a onmousedown="B()">B</a>
<a onmousedown="C()">C</a>
<script>
    function A()
    {
        createMouseMenu('menu_a','left',[
            {
                name:"a1",
                id:"a1_id",
                //close_after_click:true,
                action:function()
                {
                    //alert('a1');
                }
            },
            {
                name:"a2",
                id:"a2_id",
                close_after_click:false,
                action:function()
                {
                    //alert('a2');
                }
            }
        ]);
    }
    function B()
    {
        createMouseMenu('menu_b','middle',[
            {
                name:"b1",
                id:"b1_id",
                close_after_click:true,
                action:function()
                {
                    alert('b1');
                }
            },
            {
                name:"b2",
                id:"b2_id",
                close_after_click:false,
                action:function()
                {
                    alert('b2');
                }
            }
        ]);
    }
    function C()
    {
        createMouseMenu('menu_c','right',[
            {
                name:"c1",
                id:"c1_id",
                close_after_click:false,
                action:function()
                {
                    alert('c1');
                }
            },
            {
                name:"c2",
                id:"c2_id",
                close_after_click:true,
                action:function()
                {
                    alert('c2');
                }
            }
        ]);
    }
</script>
<hr/>
<div style="display: flex;">
    <pre style="width:30%">
    function A()
    {
        createMouseMenu('menu_a','left',[
            {
                name:"a1",
                id:"a1_id",
                //close_after_click:true,
                action:function()
                {
                    //alert('a1');
                }
            },
            {
                name:"a2",
                id:"a2_id",
                close_after_click:false,
                action:function()
                {
                    //alert('a2');
                }
            }
        ]);
    }
</pre>
    <pre style="width:30%">
    function B()
    {
        createMouseMenu('menu_b','middle',[
            {
                name:"b1",
                id:"b1_id",
                close_after_click:true,
                action:function()
                {
                    alert('b1');
                }
            },
            {
                name:"b2",
                id:"b2_id",
                close_after_click:false,
                action:function()
                {
                    alert('b2');
                }
            }
        ]);
    }
    </pre>
    <pre>
     function C()
    {
        createMouseMenu('menu_c','right',[
            {
                name:"c1",
                id:"c1_id",
                close_after_click:false,
                action:function()
                {
                    alert('c1');
                }
            },
            {
                name:"c2",
                id:"c2_id",
                close_after_click:true,
                action:function()
                {
                    alert('c2');
                }
            }
        ]);
    }
    </pre>
</div>